<template>
  <view>
    <custom-navbar title="收到简历" :autoBack="true" leftIconColor="#303133" />
    <view
      class="drop-down mb-30rpx h-88rpx flex items-center justify-between bg-#fff px-74rpx text-28rpx"
    >
      <view
        v-for="item in menu"
        :key="item.type"
        class="flex items-center"
        @tap="showPopup(item)"
      >
        <text class="mr-8rpx pb-8rpx">
          {{ item.name }}
        </text>
        <up-icon color="#4e5969" size="16rpx" name="arrow-down-fill" />
      </view>
    </view>
    <view>
  <view v-for="key in 10" :key="key" class="mb-32rpx bg-#fff px-54rpx">
      <view class="pb-36rpx pt-18rpx">
        <up-gap height="20rpx" />

        <view class="mb-14rpx flex items-center justify-between">
          <view class="text-left text-[32rpx] text-[#1d2129]">
            前端工程师
          </view>
          <view
            class="text-[28rpx] text-[#1f50f2] font-semibold tracking-[-0.3rpx]"
          >
          10k-20k·13薪
          </view>
        </view>
        <view
          class="flex items-center text-left text-[26rpx] text-[#6e6d72]"
        >
          <view>北京·海淀区</view>
          <view class="mx-10rpx h-28rpx w-2rpx bg-#6e6d72" />
          <view>北京前面科技节公司</view>
        </view>
        <view
          class="mb-20rpx flex items-center justify-between b-b b-b-#f6f7f8 b-b-solid pt-18rpx"
        >
        </view>





        <view class="flex">
          <view class="mr-16rpx h-100rpx w-100rpx shrink-0">
            <up-image width="100rpx" height="100rpx" shape="circle" />
          </view>
          <view class="flex-auto">
            <view class="mb-16rpx flex items-center justify-between">
              <view class="text-32rpx color-#1d2129">
                牛大胆
              </view>

            </view>
            <view class="flex text-26rpx color-#6e6d72 leading-100%">
              <text>山东·海淀</text>
              <up-line length="30rpx" color="#6e6d72" direction="col" margin="0 12rpx" />
              <text>男</text>
              <up-line length="30rpx" color="#6e6d72" direction="col" margin="0 12rpx" />
              <text>硕士</text>
              <up-line length="30rpx" color="#6e6d72" direction="col" margin="0 12rpx" />
              <text>全职</text>
            </view>
          </view>
        </view>
        <up-gap height="20rpx" />
        <view class="flex flex-wrap gap-10rpx justify-between">
          <view class="flex items-center">
          <view class="h-42rpx rounded-[4rpx] bg-#fcf8e9 px-8rpx text-[24rpx] text-[#f57100] leading-[42rpx]">
            科研牛人
          </view>
          <view class="h-42rpx rounded-[4rpx] bg-#fcf8e9 px-8rpx text-[24rpx] text-[#f57100] leading-[42rpx]">
            科研牛人
          </view>
        </view>
          <image class="h-60rpx w-60rpx" :src="home06" />
        </view>
        <up-gap height="20rpx" />
        <view class="flex flex-wrap items-center text-26rpx color-#6e6d72 leading-36rpx">
          <text>北京科技大学(985)</text>
          <up-line length="30rpx" color="#6e6d72" direction="col" margin="0 12rpx" />
          <text>病理学(a+)</text>
          <up-line length="30rpx" color="#6e6d72" direction="col" margin="0 12rpx" />
          <text>留学</text>
        </view>
        <up-gap height="20rpx" />
        <view class="flex items-center justify-between">
          <view class="flex flex-wrap items-center text-26rpx color-#4e5968 leading-36rpx">
            <text>专业第一专业第一</text>
            <up-line length="30rpx" color="#6e6d72" direction="col" margin="0 12rpx" />
            <text>专业第一专业第一</text>
          </view>
          <up-button
            :custom-style="{
              width: '144rpx',
              height: '58rpx',
              background: '#1f50f2',
              'border-radius': '60rpx',
              'font-size': '24rpx',
              color: '#ffffff',
              margin: '0',
            }"
          >
            立即沟通
          </up-button>
          <view>
          </view>
        </view>
      </view>
    </view>

    </view>
    <up-popup
      :show="popupData.show"
      mode="center"
      :safe-area-inset-bottom="false"
      bg-color="transparent"
      @close="close"
      @open="open"
    >
      <view class="w-662rpx overflow-hidden rounded-24rpx bg-#fff">
        <view class="relative h-106rpx flex items-center justify-end px-24rpx">
          <text
            class="absolute left-50% top-50% translate-[-50%] text-center text-[28rpx] text-[#1d2129] font-medium"
          >
            {{ popupData.title }}
          </text>
          <up-icon
            :name="PopupClose"
            color="#f2f2f2"
            size="44rpx"
            @tap="popupData.show = false"
          />
        </view>
        <view> </view>
      </view>
    </up-popup>
  </view>
</template>

  <script setup lang="ts">
// import PopupClose from "@/static/images/common/popup-close.png";
  const PopupClose = 'https://yiliao.test03.qcw800.com/static/images/common/popup-close.png'
const options = ref<Record<string, string>>({});

interface MenuItem {
  type: string;
  name: string;
  showPopup: boolean;
}

const menu = ref<Array<MenuItem>>([
  {
    name: "全部",
    type: "1",
    showPopup: true,
  },
  {
    name: "性别",
    type: "2",
    showPopup: true,
  },
  {
    name: "学校类别",
    type: "3",
    showPopup: true,
  },
  {
    name: "时间段",
    type: "4",
    showPopup: true,
  },
]);
type List = { name: string; children: { name: string }[] }[];
// 城市列表
const cityList = [
  {
    name: "热门城市",
    children: [
      {
        name: "全国",
      },
      {
        name: "上海",
      },
      {
        name: "重庆",
      },
    ],
  },
  {
    name: "北京",
    children: [
      {
        name: "北京一区",
      },
      {
        name: "北京二区",
      },
      {
        name: "北京三区",
      },
      {
        name: "北京三区",
      },
      {
        name: "北京三区",
      },
      {
        name: "北京三区",
      },
      {
        name: "北京三区",
      },
      {
        name: "北京三区",
      },
      {
        name: "北京三区",
      },
    ],
  },
  {
    name: "天津",
    children: [
      {
        name: "天津一区",
      },
      {
        name: "天津二区",
      },
      {
        name: "天津三区",
      },
    ],
  },
  {
    name: "河北",
    children: [
      {
        name: "河北一区",
      },
      {
        name: "河北二区",
      },
      {
        name: "河北三区",
      },
    ],
  },
];
// 职位分类列表
const classificationList = [
  {
    name: "不限",
    children: [
      {
        name: "全部",
      },
      {
        name: "临床试验",
      },
      {
        name: "临床研究",
      },
    ],
  },
  {
    name: "临床试验",
    children: [
      {
        name: "临床试验一区",
      },
      {
        name: "临床试验二区",
      },
      {
        name: "临床试验三区",
      },
      {
        name: "临床试验三区",
      },
      {
        name: "临床试验三区",
      },
      {
        name: "临床试验三区",
      },
      {
        name: "临床试验三区",
      },
      {
        name: "临床试验三区",
      },
      {
        name: "临床试验三区",
      },
    ],
  },
  {
    name: "医学产品研发",
    children: [
      {
        name: "医学产品研发一区",
      },
      {
        name: "医学产品研发二区",
      },
      {
        name: "医学产品研发三区",
      },
    ],
  },
  {
    name: "医学总查",
    children: [
      {
        name: "医学总查一区",
      },
      {
        name: "医学总查二区",
      },
      {
        name: "医学总查三区",
      },
    ],
  },
];
const secondaryCategoryList = ref<List>([]);
const popupData = reactive({
  show: false,
  title: "",
  menuType: "",
});
const showPopup = (item: MenuItem) => {
  if (item.showPopup) {
    popupData.title = item.name;
    popupData.menuType = item.type;
    popupData.show = true;
    if (item.type === "1") {
      secondaryCategoryList.value = cityList;
    }
    if (item.type === "2") {
      secondaryCategoryList.value = classificationList;
    }
  }
};
const close = () => {};
const open = () => {};

onLoad((params: any) => {
  options.value = params;
});
</script>

  <style scoped lang="scss"></style>
